<template>
  <div>
    <div class="top_arrow" @click="setMapNoSee">
      <div class="top_twef_arrow">

        <div class="arrow_show"></div>
      </div>
    </div>
    <div id="allmap" ref="allmap"></div>
  </div>

</template>

<style>
  .top_arrow
  {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 20;
    background: rgb(135,135,135);
    opacity: .9;
    border-radius: 5px;
  }

  /* 箭头 */
  .arrow_show
  {
    width: 12px;
    height: 12px;
    border: none;
    border-top: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(-135deg);
    margin-left: 5px;
  }

  .top_twef_arrow
  {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

<script>
  import {MP} from '@/assets/map'

    export default
    {
        data () {
            return {
              address: '广州市海珠区客村地铁站'
            }
        },
//      父类传递所选对应地址
        props: ["selectOneAddress"],
        watch:{
          selectOneAddress(nval){
            console.log(nval,7777)
            if(nval){
              
              this.selectAddress()
            }
          }
        },
        methods:
        {
            //   设置位置信息对象 和 标记( r是地址信息，map是地图对象 )
            //    centerAndZoom(): 显示地图
            //    Marker(): 创建标记对象
            //    addOverlay(): 添加覆盖物，如标记图像
            //    panTo(): map移动，标记也移动
            setAddressAndMarker(r, map)
            {
                map.centerAndZoom(r.point, 16);
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
            },

//      地址解析到 地址显示
            getShowAddress(point, map)
            {
              if (point) {
                map.centerAndZoom(point, 16);
                map.addOverlay(new BMap.Marker(point));
              }else{
                alert("您选择地址没有解析到结果!");

              }
            },

//  根据坐标逆解析获取地址描述 (r是地址信息，myGeo是你解析对象)
            getRealAddress(map, myGeo)
            {
//              myGeo.getPoint(this.address, function(point){
              myGeo.getPoint('天河区', (point)=>{
                  this.getShowAddress(point, map);
                }, {enableHighAccuracy: true});
            },


//    地图的方法
            selectAddress()
            {
                var that = this;
    //      同步获取地图
                this.$nextTick(function () {
                    MP("ozT7g2K7TQBlwdTOCKukAqTWOrXG9TCd").then(function (BMap)
                    {
    //  创建Map地图实例，Map(传递id)
                        var map = new BMap.Map("allmap");

//         创建地址解析器
                      var myGeo = new BMap.Geocoder();
//          解析对象的信息
                      that.getRealAddress(map, myGeo);

                    })
                })
            },

//       调用父类方法
          setMapNoSee()
          {
            console.log(this.selectOneAddress);
            this.$emit('setMapNoSee');
          }

        },


        mounted()
        {
          this.$refs.allmap.style.height = document.documentElement.clientHeight + "px";
          this.selectAddress();
        }
    }

</script>
